<template>
  <div class="app-container">
    <div class="line1">
      <el-row :gutter="10" class="mb8">
        <!-- <el-col :span="1.5">
          <h4>建筑名称：</h4>
        </el-col>
        <el-col :span="1.5">
          <h4>{{ route.query.buildNameFirst }}</h4>
        </el-col> -->
        <el-col :span="1.5">
          <div>监控分组：</div>
        </el-col>
        <el-col :span="1.5">
          <div>{{ route.query.name }}</div>
        </el-col>
      </el-row>
    </div>
    <div class="line2">
      <div class="column1">
        <h4 class="form-header h4">设备列表</h4>
        <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          v-show="showSearch"
          size="small"
        >
          <el-form-item label="名称" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入名称"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="编号" prop="modelId">
            <el-input
              v-model="queryParams.modelId"
              placeholder="请输入编号"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="Search"
              size="small"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="resetQuery" size="small"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          ref="multipleTableRef"
          v-loading="loading"
          :data="hvacList"
          @selection-change="handleSelectionChange"
          :row-key="(row) => row.id"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
            :reserve-selection="true"
          />
          <el-table-column
            label="名称"
            align="center"
            prop="name"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="编号"
            align="center"
            prop="modelId"
            :show-overflow-tooltip="true"
          />
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          size="small"
          @pagination="getList"
        />
      </div>
      <div class="column2">
        <h4 class="form-header h4">已选择设备列表</h4>
        <el-form :model="searchFormSelected" size="small" :inline="true">
          <el-form-item label="名称">
            <el-input
              v-model="searchFormSelected.resultOne"
              placeholder="请输入名称"
              @keyup.enter="getSearchSelected"
            ></el-input>
          </el-form-item>
          <el-form-item label="编号">
            <el-input
              v-model="searchFormSelected.resultTwo"
              placeholder="请输入编号"
              @keyup.enter="getSearchSelected"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="Search"
              size="small"
              @click="getSearchSelected"
              >搜索</el-button
            >
            <el-button icon="Refresh" size="small" @click="cancelSearchSelected"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-table :data="arrayPageSelected">
          <el-table-column
            label="名称"
            align="center"
            prop="name"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="编号"
            align="center"
            prop="modelId"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                icon="Delete"
                @click="handleUnselected(scope.row)"
                v-hasPermi="['ruoyi-device:hvac:remove']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          align="center"
          background="true"
          @current-change="handleSelectionChangesSelected"
          :page-size="pageSizeSelected"
          :current-page="pageNumSelected"
          :pager-count="11"
          layout="total,prev, pager, next,jumper"
          :total="totalSelected"
          style="float: right; margin-top: 20px"
          size="small"
        />
      </div>
    </div>
    <div class="line3">
      <el-row :gutter="10" class="mb8" style="transform: translate(45%, 0%)">
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="Edit"
            @click="handleSave"
            v-hasPermi="['ruoyi-device:hvac:save']"
            >保存</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            @click="handleBack"
            v-hasPermi="['ruoyi-device:modelbuildgroup:export']"
            ><el-icon><Back /></el-icon>返回</el-button
          >
        </el-col>
        <right-toolbar
          v-model:showSearch="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
    </div>
  </div>
</template>
<style scoped lang="scss">
.line1 {
  display: flex;
}
.line2 {
  display: flex;
  .column1 {
    width: 50%;
  }
  .column2 {
    width: 50%;
  }
}
.line3 {
  margin-top: 20px;
}
</style>
<script setup name="Hvac">
const multipleTableRef = ref(null);
function handleBack() {
  console.log(arraySelected.value);
  router.go(-1);
}

function handleUnselected(entity1) {
  multipleTableRef.value.toggleRowSelection(entity1);
  if (searchFlagSelected.value == 1) {
    getSearchSelected();
  }
}

import { reactive, ref, toRefs } from "vue";
// 多选框选中数据

function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  console.log(selection);
  arraySelected.value = selection;
  getTableListSelected();
  // console.log(ids.value);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

import { getFloorHvac } from "@/api/baseInfo/hvac";
import {
  removeBracketsAndPipes,
  emptyIsFalse,
} from "@/api/123wwwww/universalMethod";
import { updateModelcamgroup } from "@/api/baseInfo/modelcamgroup";
function handleSave() {
  let tempList = multipleTableRef.value.getSelectionRows();
  let arrayModelId = tempList.map((item1) => {
    return item1.modelId;
  });
  let arrayName = tempList.map((item1) => {
    return item1.name;
  });
  let modelIdStr = removeBracketsAndPipes(JSON.stringify(arrayModelId));
  let nameStr = removeBracketsAndPipes(JSON.stringify(arrayName));
  let entity = {
    fid: Number(route.query.id),
    code: modelIdStr,
    modName: nameStr,
  };
  console.log(entity);
  if (emptyIsFalse(tempList)) {
    updateModelcamgroup(entity).then((response) => {
      proxy.$modal.msgSuccess("修改成功");
      open.value = false;
      getList();
    });
  } else {
    ElMessage({
      type: "error",
      message: "请先选择监控！",
      showClose: true,
    });
  }
}
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
function getHistorySelected() {
  if (emptyIsFalse(route.query.id)) {
    getFloorHvac(route.query.id).then((response) => {
      response.data.forEach((item) => {
        multipleTableRef.value.toggleRowSelection(item);
      });
    });
  }
}

onMounted(async () => {
  await getList();
  await getHistorySelected();
});

import {
  listHvac,
  getHvac,
  delHvac,
  addHvac,
  updateHvac,
} from "@/api/baseInfo/hvac";
import { onMounted } from "vue";

const { proxy } = getCurrentInstance();

const hvacList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: null,
  },
  rules: {},
});

const { queryParams, form, rules } = toRefs(data);

/** 查询监控设备列表 */
function getList() {
  loading.value = true;
  if (emptyIsFalse(route.query.id)) {
    listHvac(queryParams.value).then((response) => {
      hvacList.value = response.rows;
      total.value = response.total;
      loading.value = false;
    });
  } else {
    loading.value = false;
  }
}
const pageNumSelected = ref(1);
const pageSizeSelected = ref(10);
const totalSelected = ref(0);
const arrayPageSelected = ref([]);
const arraySelected = ref([]);
function handleSelectionChangesSelected(page) {
  pageNumSelected.value = page;
  getPageListSelected(arraySelected.value);
}
const searchFlagSelected = ref(0);
const searchListSelected = ref([]);
//取得分页数据
function getTableListSelected() {
  //搜索判断
  if (searchFlagSelected.value == 0) {
    getPageListSelected(arraySelected.value);
  } else if (searchFlagSelected.value == 1) {
    getPageListSelected(searchListSelected.value);
  }
}
import { emptyIsTrue, JSONreflush } from "@/api/123wwwww/universalMethod";
import { ElMessage } from "element-plus";
function getPageListSelected(tempList) {
  arrayPageSelected.value = [];
  if (pageNumSelected.value > totalSelected.value / pageSizeSelected.value) {
    pageNumSelected.value = Math.ceil(
      totalSelected.value / pageSizeSelected.value
    );
  }
  if (pageNumSelected.value <= 0) {
    pageNumSelected.value = 1;
  }
  totalSelected.value = tempList.length;
  if (!emptyIsTrue(tempList)) {
    for (
      let i = (pageNumSelected.value - 1) * pageSizeSelected.value;
      i < totalSelected.value;
      i++
    ) {
      arrayPageSelected.value.push(tempList[i]);
      if (arrayPageSelected.value.length === pageSizeSelected.value) break;
    }
  }
}
// 搜索相关
const searchFormSelected = ref({});
//-------------搜索功能--------------
function getSearchSelected() {
  if (JSON.stringify(searchFormSelected.value) !== "{}") {
    searchFlagSelected.value = 1;
    let tempListSelected = [];
    for (let i = 0; i < arraySelected.value.length; i++) {
      if (
        //模糊查询
        arraySelected.value[i].name.indexOf(
          searchFormSelected.value.resultOne
        ) !== -1 ||
        emptyIsTrue(searchFormSelected.value.resultOne)
      )
        if (
          //模糊查询
          arraySelected.value[i].modelId.indexOf(
            searchFormSelected.value.resultTwo
          ) !== -1 ||
          emptyIsTrue(searchFormSelected.value.resultTwo)
        )
          tempListSelected.push(arraySelected.value[i]);
    }
    pageNumSelected.value = 1;
    searchListSelected.value = JSONreflush(tempListSelected);
    tempListSelected = [];
    getTableListSelected();
  } else {
    ElMessage({
      message: "搜索条件为空",
      type: "warning",
    });
  }
}
function cancelSearchSelected() {
  pageNumSelected.value = 1;
  searchFlagSelected.value = 0;
  getTableListSelected();
  searchFormSelected.value = {};
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    buildId: null,
    buildName: null,
    buildPath: null,
    classIfiedId: null,
    configuration: null,
    customImg: null,
    deviceMetaData: null,
    deviceSecret: null,
    deviceType: null,
    energyCoding: null,
    modelId: null,
    iotId: null,
    latestData: null,
    latestTime: null,
    mainBodyId: null,
    name: null,
    parentArg: null,
    parentId: null,
    primarySubitemCoding: null,
    productId: null,
    productName: null,
    registryTime: null,
    secondarySubitemCoding: null,
    sortIndex: null,
    state: null,
    typeId: null,
    tpId: null,
    seled: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    createBy: null,
    remark: null,
    delFlag: null,
  };
  proxy.resetForm("hvacRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
</script>
